<template>
  <div>
      <header id="header" :style="body">
        <div class="logo" href="www.jd.com">

        </div>
        <div class="cart-search">
            <form method="get">
                <input type="text" placeholder=" 扫地机器人 智能">
                <input type="button" value="搜索">
            </form>
            <ul>
                <li v-for="(name,value,index) in info" :key='index'>{{name}}</li>
            </ul>    
        </div>
    </header>
  </div>
</template>

<script>
export default {
    name:'JingDongTop',
    data(){
        return{
            info:["情人圆满","开工热卖","食品饮料","京东京造","冈本","Watch Se","爆款家电"],
            body:"width:1000px;margin:10px auto 0px;position:relative",
            center:"margin:0 auto",
        };
    },
    components:{},

    computed:{},

    beforeMount(){},

    mounted(){},

    methods:{},

    watch:{}
}
</script>

<style>

        .logo{
            background-image: url(https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png);
            background-repeat: no-repeat;
            margin: 20px;
            width: 134px;
            height: 42px;
        }
        .cart-search{
            margin-top: -10px;
            margin-right: 20%;
            position: absolute;
            right: 0;
            top: 40%;
            width: 543px;
            height: 30px;
            padding: 2px ;
            background-color: red;
        }
        .cart-search input{
            border: 0;
            height: 23px;
            margin: 2px;
        }
        .cart-search input[type="text"]{
            width: 80%;
            color: white;
        }
        .cart-search input[type="button"]{
            width: 15%;
            font-size: 14px;
            color: white;
            background-color: red;
        }
        ul{
            margin: 10px 0;
            width: 400px;
            font-size: 13px;
            display: flex;
            justify-content: space-evenly;
        }
        li{
            list-style-type: none;

        }
        li:hover{
            color: red;
        }
</style>